<#assign base=request.contextPath />


<!DOCTYPE html>
<html lang="utf-8">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>章节</title>

    <link href="${base}/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="${base}/css/reset.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="${base}/css/page-learing-index.css"/>

    <style type="text/css">

        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>

<#include 'header.ftl'>

<div id="app" class="f-main clearfix">
    <div class="main-course-left">
    <#--课程信息-->
        <div class="course-info" v-cloak>
        <#--标题-->
            <div class="course-title" style="font-size: 24px;">{{chapter.title}}</div>
            <div class="course-video">
            <#--章节视频-->
                <video :src="chapter.video" width="100%"
                       height="100%" controls preload></video>
            </div>

            <div class="course-menu">
                <a href="javascript:void(0)"><span class="menu-item  cur">评论</span></a>
            </div>
        </div>
    </div>

    <!-- 章节-start -->
    <div class="main-course-right" v-cloak>
        <h4 class="mt-50">所有章节</h4>
        <div class="video-course-fix-parent">
            <div class="video-course-fix">
                <div v-for="(chapter,index) in chapters" :key="chapter.id" class="chapter" style="padding: 0px ;border: none;">
                    <a href="javascript:void(0);" class="js-open">
                        <p style="margin-top: 20px;margin-bottom: 10px" @click="chapterShow(index)">
                            <strong>{{chapter.title}}</strong>
                            <span class="drop-down" v-if="chapter.seen">▲</span>
                            <span class="drop-down" v-else>▼</span>

                        </p>
                    </a>
                    <ul class="chapter-sub" style="padding-left:10px;" v-show="chapter.seen">
                        <a href="javascript:void(0)" v-for="(node,index) in chapter.nodes" :key="node.id"
                           @click="clickChapter(node)">
                            <li class="ellipsis video-li"><i class="icon-video">▶</i>
                                {{node.title}}
                                ({{node.hours}}小时{{node.minutes}}分)
                            </li>
                        </a>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 章节-end -->
</div asid>
</body>
<script src="${base}/js/vuejs-2.5.16.js"></script>
<script src="${base}/js/axios-0.18.0.js"></script>
        <script id="testScript" src="${base}/js/video.js"
        isLogin=
        <#if Session["user"]??>
        "true"
        <#else >
        "false"
        </#if>
courseId="${courseId}" chapterId="${chapterId}" base="${base}"></script>

</html>
